<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>
</template>

<style scoped lang="scss">
.wrap {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns:
      [header-start sidebar-start footer-start] minmax(min-content, 280px)
      [sidebar-end main-start] 1fr
      [header-end main-end footer-end];

  grid-template-rows:
      [header-start] auto
      [header-end sidebar-start main-start] 1fr
      [sidebar-end mian-end footer-start] auto
      [footer-end]
;

  width: 90vw;
  min-height: 90vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;

  & > * {
    display: flex;
    align-items: center;
    padding: 1rem;
    font-size:  clamp(1.2rem, 1.5vw + 1.5rem, 1.75rem);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 0.25);
  }

  header {
    grid-area: header;
    background-color: #09f;
  }
  aside {
    background-color: #c2f;
    grid-area: sidebar;
  }
  main {
    background-color: #deaf09;
    grid-area: main;
  }

  footer {
    background-color: #1b1b1b;
    grid-area: footer;
  }

}
</style>
